为了账号安全,请及时绑定邮箱和手机立即绑定

去掉图片黑背景输出为透明背景

最近遇到了一个需求,是要去掉一张图片的黑色背景,如下图所示:

image.png

如果使用OPENCV ,加上一些图像处理的算法,是可以实现去除任何背景的。但是由于这个需求就是去掉黑色背景,感觉没必要用到哪些比较复杂的算法。

于是打算在网络上搜索了一下,开始没有搜搜到,倒是搜索到一篇用ps如何来去掉黑色背景的思路:
去掉图片黑背景输出为透明png(算法和工具)

但是里面主要是说用PS的操作,而且里面说的原理,也不是很清晰。
所以打算自己想一个算法。

错误的思路

最开始的想法是判断颜色是否是黑色(r = 0,g = 0,b = 0),如果是黑色,就把该像素的透明度设置为0。 但是结果肯定是不如意的,如下图所示:

image.png

结果是,没有一个像素被设置为全透明的。 为什么呢? 因为这个背景并不是纯黑色的,只是偏黑色,比如像素值(r=15,g=5,b=5),不是纯黑色,但是人眼的感觉是黑色的。

正确的思路

经过思索,想到了另外一种思路,就是越黑的颜色,其透明度设置的越低。 因此只需要去除像素中三个通道中的较大值,设置为颜色的透明度即可,比如像素值(r=15,g=5,b=5),则可以把透明度设置为
Math.max(15,5,5) = 15。

下面是示例代码:

function removeBlackBackgroundFunc(frameImageData) {
   let data = frameImageData.data;
   for(var i = 0;i < data.length / 4; i ++){
      var index = i * 4;
      var r = data[index],g = data[index + 1],b = data[index + 2],a = data[index + 3];
      var max = Math.max(r,g,b);
      data[index + 3] = max;
      if(r == 0 && g == 0 && b == 0){
        data[index + 3] = 0;
      }
   }
   return frameImageData;
}

把去掉黑色背景的图绘制到一个蓝色的背景上面,代码如下:

  ctx.globalCompositeOperation = 'destination-over';
  ctx.fillStyle = 'rgba(0,0,255,1.0)';
  ctx.fillRect(0,image.height,image.width,image.height + 10);

最终如下图所示:

image.png

原理总结

由于我使用的是浏览器 JavaScript编程语言,所以我使用的是浏览器上面canvas的功能。
首先把图片绘制到canvas上面,然后可以通过canvas的相关方法取到每一个像素,然后使用去黑底的方法 操纵像素。

如果读者不清楚canvas相关知识点,建议学习相关知识,也推荐有兴趣读者,订阅专栏:
Canvas高级进阶 https://xiaozhuanlan.com/canvas,相关知识会在专栏中介绍。

去黑底的原理,用通俗的话来说 “越黑的像素越透明”。

不同的方法,实现的细节上有可能会有些许区别。
比如,我们可以考虑把像素的最大值取出后,把线性空间变换到非线性空间,比如如下代码:

var adjust = 0.8;
 data[index + 3] = Math.pow(max/255,adjust) * 255;

最终的效果,会有细节上的些许差别,可以调整adjust查看细节上的差异。

本文由博客一文多发平台 OpenWrite 发布!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消